<template>
	<div>
		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">

					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="企业名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'companyName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="企业类型" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择"
									v-decorator="['companyType', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="1">个人</a-select-option>
									<a-select-option :value="2">企业</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="统一社会信用代码" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'generalCreditCode',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="法人姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'legalName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="法人身份证号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'legalIdCard',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="申请人昵称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
								  'nickName',
								  {
								    rules: [{ required: true, message: '请输入', whitespace: true }]
								  }
								]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="申请人手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'mobile',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="企业地址" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-textarea placeholder="请输入" v-decorator="[
                    'companyAddress',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="法人身份证正面" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`legalIdCardFrontPictureUrl`) < 1"
									@uploadSuccess="formuploadSuccess($event, `legalIdCardFrontPictureUrl`)"
                              accept=".png,.jpg"
									v-decorator="[
                    `legalIdCardFrontPictureUrl`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="法人身份证反面" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`legalIdCardBackPictureUrl`) < 1"
                              accept=".png,.jpg"
									@uploadSuccess="formuploadSuccess($event, `legalIdCardBackPictureUrl`)" v-decorator="[
                    `legalIdCardBackPictureUrl`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="营业执照" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`licensePictureUrl`) < 1"
                              accept=".png,.jpg"
									@uploadSuccess="formuploadSuccess($event, `licensePictureUrl`)" v-decorator="[
                    `licensePictureUrl`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>

						
					</a-row>


				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		get
	} from 'lodash'
	import {
		createBussiness,
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this)
			}
		},
		computed: {

		},
		watch: {},
		async created() {},

		methods: {
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					[type]: [data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				if (this.info.id) {
					this.cancel()
					this.loading = false
					return
				}
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						console.log(values)
						const {
							info
						} = this

						let data = {
							...this.$utils.trimValue(values),
							licensePictureUrl: values.legalIdCardFrontPictureUrl[0],
							legalIdCardFrontPictureUrl: values.legalIdCardFrontPictureUrl[0],
							legalIdCardBackPictureUrl: values.legalIdCardBackPictureUrl[0],
							approveStatus:1
						}


						console.log('data', data)

						createBussiness(data)
							.then(() => {
								this.$message.success("新增成功")
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			open(data) {
				this.info = data
				console.log(data, '111111')
				if (data.id) {
					this.titles = '查看'
				} else {
					this.titles = '新增'
				}
				this.showModal = true
				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
				this.$nextTick(() => {
					this.form.setFieldsValue({
						isEnabled: true,
						...data,
						licensePictureUrl: [data.licensePictureUrl],
						legalIdCardFrontPictureUrl: [data.legalIdCardFrontPictureUrl],
						legalIdCardBackPictureUrl: [data.legalIdCardBackPictureUrl]
					})
				})
				// this.$emit('upload')
				// this.$nextTick(() => {
				//     this.form.setFieldsValue({
				// 					...res
				// 				})

				// 			})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>